<template>
  <div class="page">
    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form :inline="true" size="small" :model="formInline" class="search_form">
        <el-form-item label="选择城市：">
          <el-select v-model="formInline.city" filterable clearable>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择医院：">
          <!-- <el-select v-model="formInline.hospital" clearable filterable>
            <el-option v-for="(item,index) in hospitalList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
          <hospital-select v-model="formInline.hospital"></hospital-select>
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="getList()">筛选</el-button>
        <el-button type="default" size="small" @click="rest">清空筛选</el-button>
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 内容区域 开始 -->
    <div class="calendar_box">
      <div class="calendar_header">
        <el-date-picker v-model="formInline.yearMonth" type="month" placeholder="选择年月" :clearable="false" value-format="yyyy-MM" size="small" @change="getList"></el-date-picker>
        <div class="example_list">
          <span class="cspan c_white"></span>
          <span>待到店</span>
          <span class="cspan c_grey"></span>
          <span>已取消</span>
          <span class="cspan c_blue"></span>
          <span>已改约</span>
          <span class="cspan c_green"></span>
          <span>已成交</span>
          <span class="cspan c_red"></span>
          <span>未成交</span>
        </div>
      </div>
      <el-calendar v-model="formInline.yearMonth">
        <template slot="dateCell" slot-scope="{data}">
          <p class="p_today" :class="data.isSelected ? 'is-selected' : ''" style="text-align:left">{{ data.day.split('-').slice(2).join('-') }}</p>
          <el-popover placement="right" width="800" trigger="hover">
            <div>
              <div class="title">{{data.day}}</div>
              <div class="popover_box">
                <p v-for="(item,index) in getData(data)" :key="index">
                  <span class="el_tag" :class="classNameList[item.status]">{{item.name}}/{{showTime(item.appointmentTime)}}/{{item.enrollProjectNames}}/{{item.principal}}/{{item.hospitalName}}</span>
                </p>
              </div>
            </div>
            <div class="note_list" slot="reference">
              <template v-for="(item,index) in getData(data)">
                <p :key="index" v-if="index<6">
                  <span class="el_tag" :class="classNameList[item.status]" @click="lookUser(item)">{{item.name}}/{{showTime(item.appointmentTime)}}/{{item.enrollProjectNames}}/{{item.principal}}/{{item.hospitalName}}</span>
                </p>
              </template>
            </div>
          </el-popover>
        </template>
      </el-calendar>
    </div>
    <!-- 内容区域 end -->

  </div>
</template>
<script>
import {
  GETSCHEDULINGSEARCH,
  GETCITYOPTIONS,
  GETSCHEDULINGSCHEDULES,
} from "@/http/system";
import { GETHOSPITALOPTIONS } from "@/http/hospital";
import moment from "moment";
export default {
  data() {
    return {
      formInline: {},
      monthTime: "",
      pageNumber: 1,
      pageSize: 8,
      cityList: [],
      hospitalList: [],
      scheduList: [],
      yearMonth: moment().format("yyyy-MM"),
      classNameList: {
        5: "el_tag_white",
        6: "el_tag_grey",
        4: "el_tag_blue",
        8: "el_tag_green",
        7: "el_tag_red",
      },
      showDialog: false,
      dayTime: "",
    };
  },
  // watch:{
  //   scheduList:{
  //     handler:function(e){
  //     }
  //   }
  // },
  created() {
    this.$set(this.formInline, "yearMonth", moment().format("yyyy-MM"));
    this.getList();
    this.getCity();
  },
  mounted() {},
  methods: {
    /** 重置 */
    rest() {
      this.formInline = { yearMonth: moment().format("yyyy-MM") };
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let oParams = JSON.parse(JSON.stringify(this.formInline));
      // oParams.pageNumber = 1;
      // oParams.pageSize = 6;
      return oParams;
    },

    /** 获取列表 */
    getList() {
      let _this = this;
      let oParams = this.getParams();
      GETSCHEDULINGSCHEDULES(oParams).then((res) => {
        let obj = res.data || [];
        let options = {};
        obj.map((k) => {
          let i = moment(k.appointmentTime).format("yyyy-MM-DD");
          if (options[i]) {
            options[i].push(k);
          } else {
            options[i] = [k];
          }
        });
        console.log(options);
        _this.scheduList = options;
      });
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 获取所有医院
    getHospital(code) {
      let oParams = {};
      oParams.city = code;
      if (this.formInline.hospital) {
        delete this.formInline.hospital;
      }
      GETHOSPITALOPTIONS(oParams).then((res) => {
        this.hospitalList = res.data || [];
      });
    },

    // 展示数据
    getData(obj) {
      let list = this.scheduList;
      return list[obj.day];
    },

    // 展示time
    showTime(str) {
      if (!str) {
        return "";
      }
      let m = moment(str).format("H:mm");
      return m;
    },

    // 查看用户详情
    lookUser(row) {
      // let o = deepClone(row);
      // broadcast('userDetail',row)
    },

  },
};
</script>
<style lang="scss">
.el-calendar-table {
  border: 1px solid #ebeef5;
  border-collapse: collapse;
  thead {
    th {
      background: rgb(179, 216, 255, 0.2);
      font-weight: bold;
    }
  }
  .el-calendar-day {
    height: 220px;
    .p_today {
      padding: 0;
      margin: 0;
    }
  }
}
.el-calendar__header {
  display: none;
}
</style>
<style lang="scss" scoped>
.note_list {
  display: flex;
  flex-direction: column;

  p {
    margin: 0;
    padding: 0px;
  }
  .el_tag {
    display: block;
    margin: 4px 0;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .el_tag_white {
    background: #fff;
    border: 1px solid #999;
    color: #999;
  }
  .el_tag_grey {
    background: #999;
    border: 1px solid #999;
    color: #fff;
  }
  .el_tag_blue {
    background: #ffa04c;
    border: 1px solid #ffa04c;
    color: #fff;
  }
  .el_tag_green {
    background: #40d69f;
    border: 1px solid #40d69f;
    color: #fff;
  }
  .el_tag_red {
    background: #ff4c4f;
    border: 1px solid #ff4c4f;
    color: #fff;
  }
}
.calendar_box {
  background: #fff;
  padding: 0 10px;
}
.calendar_header {
  padding: 18px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: flex-end;
  .example_list {
    display: flex;
    align-items: center;
    font-size: 14px;
    .cspan {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      margin: 0 16px 0 20px;
    }
    .c_white {
      background: #fff;
      border: 1px solid #999;
    }
    .c_grey {
      background: #999;
      border: 1px solid #999;
    }
    .c_blue {
      background: #ffa04c;
      border: 1px solid #ffa04c;
    }
    .c_green {
      background: #40d69f;
      border: 1px solid #40d69f;
    }
    .c_red {
      background: #ff4c4f;
      border: 1px solid #ff4c4f;
    }
  }
}
.popover_box {
  display: flex;
  flex-wrap: wrap;
  max-height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
  p {
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px 0 0;
    display: flex;
    align-items: center;
    line-height: inherit;
    margin: 0;
    .el_tag {
      flex: 1;
      margin: 4px 0;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .el_tag_white {
      background: #fff;
      border: 1px solid #999;
      color: #999;
    }
    .el_tag_grey {
      background: #999;
      border: 1px solid #999;
      color: #fff;
    }
    .el_tag_blue {
      background: #ffa04c;
      border: 1px solid #ffa04c;
      color: #fff;
    }
    .el_tag_green {
      background: #40d69f;
      border: 1px solid #40d69f;
      color: #fff;
    }
    .el_tag_red {
      background: #ff4c4f;
      border: 1px solid #ff4c4f;
      color: #fff;
    }
  }
  p:nth-child(2n) {
    margin: 0;
    padding: 0;
  }
}
</style>